<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-select
          v-model="query.state"
          placeholder="审核状态"
          class="handle-select mr10"
          @change="selectChange"
        >
          <el-option key="0" label="全部" value=""></el-option>
          <el-option key="1" label="未审核" value="0"></el-option>
          <el-option key="2" label="初审通过" value="1"></el-option>
          <el-option key="3" label="已通过" value="2"></el-option>
          <el-option key="4" label="不通过" value="3"></el-option>
        </el-select>
        <el-input
          v-model="query.search"
          placeholder="申报ID"
          style="width: 300px;"
          class="handle-input mr10"
        ></el-input>
        <el-button
          type="primary"
          class="button-top"
          icon="Search"
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button
          type="warning"
          class="button-top"
          icon="List"
          
          @click="expoetApprovePlayList"
          >导出二审ID</el-button
        >
        <!-- <el-link href="/fm/api/player/expoetApprovePlayList?state=1" type="warning" target="_blank" style="margin:0 0 0 10px">     下载模板</el-link> -->
        <!-- <el-button type="primary" class="button-top" :icon="Plus" @click="ClickAdd"
          >新增</el-button
        > -->
      </div>
      <div  class="tabletop-button">
        <el-button
          type="primary"
          class="button-top"
          icon="Search"
          @click="toggleSelection"
          >{{allselect==true?'取消全选':'全选'}} </el-button
        >
        <el-button
          type="success"
          class="button-top"
          icon="Search"
          :disabled="alldoing"
          @click="approve(4,'all')"
          >批量通过 </el-button>
        <el-button
          type="danger"
          class="button-top"
          icon="Search"
          :disabled="alldoing"
          @click="openBox('all')"  
          >批量拒绝 </el-button>

      </div>
      <el-table
        :data="PlayerData"
        border
        class="table"
        ref="multipleTableRef"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
      
      <el-table-column type="selection" width="40" :selectable="checkSelectable"/>
        <el-table-column
         type="index"
          label="序号"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="ID"></el-table-column>
        <el-table-column
          prop="accountId"
          label="游戏唯一ID"
          show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="teamName" label="战队"></el-table-column>
        <el-table-column prop="wechat" label="微信号"></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="comment" label="申报备注"></el-table-column>
        <el-table-column prop="desc" label="审核批注"></el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.state === 0
                  ? 'primary'
                  : scope.row.state === 1
                  ? 'primary'
                  : scope.row.state === 2
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                scope.row.state === 0
                  ? "待审核"
                  : scope.row.state === 1
                  ? "初审通过"
                  : scope.row.state === 2
                  ? "已通过"
                  : "不通过"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作">
          
          <template #default="scope">
            <el-button
              v-if="scope.row.state==0"
              @click="approves(scope.$index, scope.row)"
              v-permiss="21"
              type="primary"
            >
              初审
            </el-button>
            <el-button
              v-if="scope.row.state>=2"
              @click="approves(scope.$index, scope.row)"
              v-permiss="21"
              type="primary"
            >
              查看数据
            </el-button>
            <el-button
              v-if="scope.row.state==1"
              @click="approvesSecond(scope.$index, scope.row)"
              v-permiss="21"
              type="warning"
            >
              二审
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          v-model:page-size="query.limit"
          :page-sizes="[10, 15, 20, 50]"
          :current-page="query.page"
          :total="pageTotal"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>


    <el-dialog   :title="'审核:'+choseName" v-model="showApprove" v-if="showApprove" top="5vh" :before-close="dialogClose(1)" width="60%">
      
      <el-table v-loading="loading" :data="SeasonTableData?.exp" border class="table"  header-cell-class-name="table-header">
          <!-- <el-table-column :label="'账号信息详情(' + choseName + ')'" align="center"> -->
            <el-table-column prop="tier" label="轮换等级" width="100" align="center"></el-table-column>
            <el-table-column label="当前等级">
              <template #default="scope">
                <el-tag
              :type="(scope.row.level+(scope.row.tier-1)*500) >=500
                  ? 'success'
                  : 'danger'
              "
            >
            {{
                  scope.row.level+(scope.row.tier-1)*500
                }}
            </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="xp" label="经验值"></el-table-column>
            <el-table-column  label="封禁历史">
              <template #default="scope">
            <el-tag
              :type="scope.row.ban === '永久封禁'
                  ? 'danger'
                  : 'success'
              "
            >
              {{scope.row.ban}}
            </el-tag>
          </template>
            </el-table-column>
            <el-table-column prop="totalMatchesPlayed" label="总游戏场数"></el-table-column>
          <!-- </el-table-column> -->
        </el-table>
     
        <el-table v-loading="loading" :data="SeasonTableData?.fpp" border class="table"  header-cell-class-name="table-header">
          <el-table-column :label="'FPP数据(' + choseName + ')'" align="center">
            <el-table-column prop="SeasonName" label="赛季" width="100" align="center"></el-table-column>
            <el-table-column prop="Round" label="场次"></el-table-column>
            <el-table-column prop="KD" label="KD"></el-table-column>
            <el-table-column prop="KDA" label="KDA"></el-table-column>
            <el-table-column prop="DamageAvg" label="场均伤害"></el-table-column>
            <el-table-column prop="RankPoint" label="Rank分数"></el-table-column>
          </el-table-column>
        </el-table>

        <el-table v-loading="loading" :data="SeasonTableData?.tpp" border class="table"  header-cell-class-name="table-header">
          <el-table-column :label="'TPP数据(' + choseName + ')'" align="center">
            <el-table-column prop="SeasonName" label="赛季" width="100" align="center"></el-table-column>
            <el-table-column prop="Round" label="场次"></el-table-column>
            <el-table-column prop="KD" label="KD"></el-table-column>
            <el-table-column prop="KDA" label="KDA"></el-table-column>
            <el-table-column prop="DamageAvg" label="场均伤害"></el-table-column>
            <el-table-column prop="RankPoint" label="Rank分数"></el-table-column>
          </el-table-column>
        </el-table>
      

      

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" v-if="choseState<2" @click="approve(1,'single')">初审通过</el-button>
          <el-button type="danger" v-if="choseState<2" @click="openBox('single')">初审拒绝</el-button>
          <el-button @click="showApprove = false">取 消</el-button>
        </span>
      </template>

    </el-dialog>
    <el-dialog   :title="'报审拒绝'" v-model="approveNo" v-if="approveNo"  align-center :before-close="dialogClose2(1)" width="300px">
      <el-select v-model="formApproveDataDesc" style="width:250px" 
      filterable
       allow-create
      clearable placeholder="拒绝原因">
    <el-option
      v-for="item in ApproveNoDescList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="approve(3,approveNoType)">确定</el-button>
          <el-button @click="approveNo = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="audit">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox,ElTable,ElLoading   } from "element-plus";
import type { Action } from 'element-plus'
import {
  GetApprovePlayerList,
  GetPlayerExp,
  GetPlayerSeason,
  ApprovePlayer,
  ExpoetApprovePlayList
} from "../api/player";

const ApproveNoDescList = [
  {
    value: '等级不足,需要满足500级要求',
    label: '等级不足',
  },
  {
    value: 'ID违规/不合格',
    label: 'ID违规',
  },
  {
    value: '赛季数据过少',
    label: '赛季数据过少',
  },
  {
    value: '数据异常',
    label: '数据异常',
  },
  {
    value: '禁赛',
    label: '禁赛',
  },
  {
    value: '其他',
    label: '其他',
  },
]
const PlayerData = ref<PlayerItem[]>([]);
const SeasonData = ref<tabelData[]>([]);
const SeasonTableData = ref<tabelData>();
const multipleSelection = ref<PlayerItem[]>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const formApproveDataAll = ref<ApprovePlayerinter[]>([])
const formApproveData =ref<ApprovePlayerinter>() 
const formApproveDataDesc =ref("")
const showApprove = ref(false);
const approveNo = ref(false);
const approveNoType = ref('single');
const findData = ref(false);
const allselect = ref(false);
const fullscreenLoading = ref(false) //屏幕加载遮罩
const alldoing = ref(true);
const loading = ref(false);
const choseName = ref("");
const choseid = ref(0);
const choseState = ref(0);
const pageTotal = ref(0);
interface tabelData {
  accounid: string;
  name: string;
  exp: ExpInfo[];
  tpp: Season[];
  fpp: Season[];
}
interface PlayerItem {
  id: number;
  name: string;
  teamName: string;
  accountId: string;
  comment: string;
  email: string;
  wechat: string;
  state: number;
  createTime: string;
}
interface Season {
  DamageAvg: number;
  HaveData: number;
  KD: number;
  KDA: number;
  RankPoint: number;
  Round: number;
  SeasonName: string;
}
interface ExpInfo {
    tier: number;
    level: number;
    lastMatchId: string;
    totalMatchesPlayed: number;
    xp: number;
    ban:string
}


const query = reactive({
  sqType: "",
  search: "",
  total: 15,
  state: "0",
  page: 1,
  limit: 10,
});
interface ApprovePlayerinter{
  id: number,
  state: number,
  desc: string,
}


const formGetPlayerData = reactive({
  accounid: "",
  name: "",
});
const dialogClose = (index: number) => {
  if (index == 2){
    showApprove.value = false;
  }
  
};
const dialogClose2 = (index: number) => {
  if (index == 2){
    showApprove.value = false;
  }
  
};
const GetApprovePlayerLists = () => {
  GetApprovePlayerList(query)
    .then((res: any) => {
      if (res.data.code === 200) {
        PlayerData.value = res.data.data;
        pageTotal.value = res.data.total;
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch((res) => {
      ElMessage.error(res.data.msg);
    });
};
const GetApprovePlayerExp = (accounid:string) => {
  GetPlayerExp({accounid:accounid})
    .then((res: any) => {
      if (res.data.code === 200) {
        PlayerData.value = res.data.data;
        pageTotal.value = res.data.total;
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch((res) => {
      ElMessage.error(res.data.msg);
    });
};

// 获取选手赛季数据
const GetApprovePlayerSeason = () => {
  findData.value = false;
  console.log(SeasonData.value)
  SeasonData.value.forEach(function (data, index) {
   
    if (data.name == choseName.value) {
      SeasonTableData.value = data;
      findData.value = true;

    }
  });
  if (findData.value) {
    loading.value=false

    return;
  }
  GetPlayerSeason(formGetPlayerData)
    .then((res: any) => {
      if (res.data.code === 200) {
        const resdata: tabelData = {
          accounid: "",
          name: "",
          tpp: [],
          fpp: [],
          exp:[],
        };
        const expData: ExpInfo = {
          tier: 0,
          level: 0,
          lastMatchId: "",
          totalMatchesPlayed: 0,
          xp: 0,
          ban:""
        }
        resdata.name = choseName.value;
        resdata.accounid = formGetPlayerData.accounid;
        resdata.fpp = res.data.data.fpp;
        resdata.tpp = res.data.data.tpp;
        var exp =res.data.data.exp.data.attributes
        expData.tier=exp.tier
        expData.level=exp.level
        expData.totalMatchesPlayed=exp.totalMatchesPlayed
        expData.xp=exp.xp
        expData.ban=exp.ban
        resdata.exp.push(expData);
        console.log( resdata.exp)
        SeasonData.value.push(resdata);
        SeasonTableData.value = resdata;
        loading.value=false
      } else {
        ElMessage.error(res.data.msg);
        loading.value=false
      }
    })
    .catch((res) => {
      ElMessage.error(res.data.msg);
      loading.value=false
    });
  

};
const handlePageChange = (val: number) => {
  query.page = val;
  GetApprovePlayerLists();
};
const handleSizeChange = (val: number) => {
  query.limit = val;
  GetApprovePlayerLists();
};
//初始化页面进入进行查询
GetApprovePlayerLists();
// 搜索按钮
const handleSearch = () => {
  query.page = 1;
  GetApprovePlayerLists();
};
//点击进入审核页面
const approves = (index: number, row: any) => {
  loading.value=true
  choseState.value=row.state
  choseName.value = row.name;
  choseid.value = row.id;
  formGetPlayerData.accounid = row.accountId;
  formGetPlayerData.name = row.name;
  showApprove.value = true;
  console.log(showApprove.value);
  GetApprovePlayerSeason()
};

// 审核操作
const approve = (state:any,kind:string) =>{
 
  var data: ApprovePlayerinter = {
    id: 0,
    state: 0,
    desc: ""
  }
  approveNo.value=false
  data.state=state
  data.id=choseid.value
  data.desc=formApproveDataDesc.value
  if (kind=="single"){
    formApproveDataAll.value.push(data)
  }else{
   
  
    for (let index = 0; index < multipleSelection.value.length; index++) {
      var selectData = multipleSelection.value
      var states=state
      if (state==4){

        if (selectData[index].state==0){
          states=1
          formApproveDataDesc.value="初审通过,请耐心等待二审"
        }else if (selectData[index].state==1){
          states=2
          formApproveDataDesc.value="二审通过"
        }
      }
      formApproveDataAll.value.push({
        id: selectData[index].id,
        state: states,
        desc: formApproveDataDesc.value
        })
    }
    
  }
  const loading = ElLoading.service({
    lock: true,
    text: '提交中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  ApprovePlayer(formApproveDataAll.value).
  then((res: any) => {
      if (res.data.code === 200) {
        ElMessage.success("提交成功");
        GetApprovePlayerLists();
      }else{
        ElMessage.error(res.data.msg);
      }
  })
  .catch((res) => {
      ElMessage.error(res.data.msg);
  });
  showApprove.value=false
  formApproveDataDesc.value=""
  formApproveDataAll.value=[]
  fullscreenLoading.value = false
  loading.close()
}
const openBox = (types:string)=> {
  approveNoType.value=types
  approveNo.value=true
  return
  // ElMessageBox.prompt('请输入不通过原因', '初审拒绝', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   inputPattern:/^.+$/,
  //   inputErrorMessage: '请输入拒绝原因',
  // })
  //   .then(({ value }) => {
  //     formApproveDataDesc.value=value
  //     approve(3,'single')
  //     // ElMessage({
  //     //   type: 'success',
  //     //   message: `提交成功`,
  //     // })
  //   })
  //   .catch(() => {
      
  //   })
}
const AllopenBox = ()=> {
  ElMessageBox.prompt('请输入不通过原因', '拒绝', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern:/^.+$/,
    inputErrorMessage: '请输入拒绝原因',
  })
    .then(({ value }) => {
      formApproveDataDesc.value=value
      approve(3,'all')
      // ElMessage({
      //   type: 'success',
      //   message: `提交成功`,
      // })
    })
    .catch(() => {
      
    })
}


const closeBox = (value:any) => {
  
       
        console.log(value)
        if ( value=="cancel"){
         
          formApproveDataDesc.value="不通过"
           approve(3,'single')
        }else if ( value=="confirm"){
          
          formApproveDataDesc.value="审核通过"

          approve(2,'single')
        }
    }
const approvesSecond =(index: number, row: any)=>{
  choseName.value = row.name;
  choseid.value = row.id;
  ElMessageBox.confirm(
    '请确认该账号二审情况',
    '二审账号：'+row.name,
    {
      confirmButtonText: '通过',
      distinguishCancelAndClose:true,
      cancelButtonText: '拒绝',
      cancelButtonClass:'el-button--danger',
      confirmButtonClass:'el-button--success',
      type: 'warning',
      callback:closeBox,
    }
  ).then().catch()
  
    
}
const toggleSelection = () => {
  if (!allselect.value) {
      multipleTableRef.value!.toggleAllSelection()
      allselect.value=true
  } else {
    multipleTableRef.value!.clearSelection()
    allselect.value=false
    alldoing.value=true
  }
}
const handleSelectionChange = (val: PlayerItem[]) => {
  multipleSelection.value = val
  if (multipleSelection.value.length>=pageTotal.value ||multipleSelection.value.length>=query.limit){
    allselect.value=true
  }else{
    allselect.value=false
  }
  if (multipleSelection.value.length>0){
    alldoing.value=false
  }else{
    alldoing.value=true
  }
  console.log(allselect.value)
}
// 选择框是否可选
const checkSelectable=(row:any)=> {
  if (row.state >1){
    console.log(row.state)
    return  false
  }else{
    console.log(row.state,'允许')

    return true
  }
  
}

const selectChange = ()=>{
  GetApprovePlayerLists();
}
const expoetApprovePlayList = ()=>{
  window.open(`/fm/api/player/expoetApprovePlayList?state=1`,'_blank')
}


</script>


<style>

.message-title {
  cursor: pointer;
}
.handle-row {
  margin-top: 30px;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.handle-select {
  width: 120px;
}

.button-top {
  margin-left: 10px;
}
.tabletop-button{
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
